<template>
	<div
		class="drop-down-tree"
    :class="[
      className && (
        typeof className === 'function' ?
          className({ id, treeData, level, parent: parentData, parentIds, isExpand, hasContent })
        :
          className
      )
    ]"
	>
		<drop-down
			openAnimation
			:isExpand="isExpand"
			:hasContent="hasContent"
		>
			<slot
				slot="title"
				name="title"
				:id="id"
				:data="treeData"
				:level="level"
				:parent="parentData"
        :parentId="parentId"
        :index="index"
        :indexs="indexs"
				:parentIds="parentIds"
				:isExpand="isExpand"
				:hasContent="hasContent"
			/>
			<div
				class="drop-down-content"
				drag-list-type="list"
			>
				<drop-down-tree
					v-for="(child, index) in treeData[childrenName]"
					:key="index"
					:treeData="child"
					:idName="idName"
					:childrenName="childrenName"
					:level="level + 1"
					:expandMap="expandMap"
					:parentData="treeData"
          :parentId="id"
          :index="index"
          :indexs="[...indexs, index]"
					:parentIds="[...parentIds, treeData[idName]]"
          :defaultExpand="defaultExpand"
          :className="className"
				>
					<slot
						slot="title"
						slot-scope="{ id, data, level, parent, parentId, index, indexs, parentIds, isExpand, hasContent }"
						name="title"
            :id="id"
            :data="data"
            :level="level"
            :parent="parent"
            :parentId="parentId"
            :index="index"
            :indexs="indexs"
            :parentIds="parentIds"
            :isExpand="isExpand"
            :hasContent="hasContent"
					/>
				</drop-down-tree>
			</div>
		</drop-down>
	</div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";

import DropDown from "../drop-down/index.vue";

type IdType = null | number | string;

@Component({
  name: "DropDownTree",
	components: {
		DropDown,
	},
})
export default class DropDownTree extends Vue {

  @Prop({ type: Object, required: true }) public treeData!: any;
  @Prop({ required: true }) public idName!: IdType;
  @Prop({ type: String, required: true }) public childrenName!: string;
  @Prop({ type: Object, required: true }) public expandMap!: { [key in IdType]: boolean };
  @Prop({ type: Number, default: 1 }) public level!: number;
  @Prop({ type: Object }) public parentData!: any;
  @Prop({ default: -1 }) public parentId!: IdType;
  @Prop({ type: Number, default: -1 }) public index!: number;
  @Prop({ type: Array, default: [] }) public indexs!: number[];
  @Prop({ type: Array, default: () => [] }) public parentIds!: IdType[];
  @Prop({ type: Boolean, default: true }) public defaultExpand!: boolean;
  @Prop({ type: [String, Function] }) public className!: string | ((info: any) => string);

  public get id() {
    return this.treeData[this.idName];
  }

  public get isExpand(): boolean {
    const isExpand = this.expandMap[this.id];
    if (typeof isExpand === "boolean") {
      return isExpand;
    } else {
      return this.defaultExpand ? true : false;
    }
  }

  public get hasContent(): boolean {
    const { treeData, childrenName } = this;
    return treeData[childrenName] && treeData[childrenName].length > 0;
  }

}
</script>
